<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen" />

		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">

			body {
				font-size: 14px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}

		</style>
		
	</head>

	<body>

		<script type="text/javascript" charset="utf-8">
		
			if (window.widget) {
				widget.setNavigationEnabled(false);
                        menu.showSoftkeys();
			}

			var init = function() {
				
				/* Global Default Floating Menu */
				
				var defaultTopItems = [
					{classname: 'nokia-template-header-title', label: 'VIEW ONE' },
				];
				
				var FirstView = Nokia.View.extend({
					/*
					* Lifecycle
					*/
					init: function() {
						//console.log("initialize FirstView view");
					},
				
					renderUI: function() {
						this._viewHeader = Nokia.dom.parseHTML('<p class="nokia-view-header">First View Header First View Header' +
						'First View Header First View Header First View Header First View Header First View Header First View Header' +
						'</p>');
						
						Nokia.dom.append(this.getContainer(), this._viewHeader);

						var _link1 = Nokia.dom.parseHTML('<a href="javascript:void(0);">Link1</a>');

						Nokia.dom.append(this.getContainer(), _link1);

					},
				
					bindUI: function() {
						
						this._viewHeader.click(function() {
							//console.log('Clicked on Header');
						});
						
					},
					
					syncUI: function() {
						this._viewHeader.css('color', 'red');
					},
					
					show: function() {
						var template = this.getTemplate();
						var topBar = template.getHeaderTopBar();
						
						defaultTopItems[0] = {classname: 'nokia-template-header-title', label: 'VIEW ONE', navigable: false };
						
						var softKeysItems = [
							{ label: 'Show View 02', callback: function() { viewManager.show(1) } }
						];
						
						topBar.setItems(defaultTopItems);
						template.setSoftKeysItems(softKeysItems);
						
						this.getContainer().show();
					}
				});
				
				var SecondView = Nokia.View.extend({
					/*
					* Lifecycle
					*/
					init: function() {
						//console.log("initialize FirstView view");
					},
				
					renderUI: function() {
						this._viewHeader = Nokia.dom.parseHTML('<p class="nokia-view-header">Second View Header Second View Header' +
						'Second View Header Second View Header Second View Header Second View Header Second View Header Second View Header' +
						'</p>');
						
						Nokia.dom.append(this.getContainer(), this._viewHeader);
					},
				
					bindUI: function() {
						
						this._viewHeader.click(function() {
							//console.log('Clicked on Header');
						});
						
					},
					
					syncUI: function() {
						this._viewHeader.css('color', 'blue');
					},
					
					show: function() {
						var template = this.getTemplate();
						var topBar = template.getHeaderTopBar();
						var viewManager = template.getViewManager();
						
						defaultTopItems[0] = {classname: 'nokia-template-header-title', label: 'VIEW TWO', navigable: false };
						
						var softKeysItems = [
							{ label: 'Show View 01', callback: function() { viewManager.show(0) } }
						];
						
						topBar.setItems(defaultTopItems);
						template.setSoftKeysItems(softKeysItems);
						
						this.getContainer().show();
					}
				});
				
				var viewManager = new Nokia.ViewManager({
					show: function(view) {
						//console.log(view);
					}
				});
				
				viewManager.add(new FirstView());
				viewManager.add(new SecondView());
			
				var templateDefault = new Nokia.TemplateDefault({
					viewManager: viewManager,
					showSoftKeys: true,
					header: {
						items: [] // They are already set in each view
					},
					footer: {
						items: [
							{
								label: "icon",
								icon: 'images/icon1.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							},
							{
								label: "icon",
								icon: 'images/icon2.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							},
							{
								label: "icon",
								icon: 'images/icon3.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							},
							{
								label: "icon",
								icon: 'images/icon4.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							},
							{
								label: "icon",
								icon: 'images/icon5.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							}
						]
					}
				});
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
					
			};
			
			/*
			 * Show splash while loading components.
			*/
				
			Nokia.showSplash('<span>LOADING</span>');
			
			Nokia.use('template-default', init);

		</script>

	</body>
</html>